<template>
  <div class="app-container">
    <TheTable
      tableID="noApply"
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      rowKey="id"
      :immediate="false"
      :queryParams="queryParams"
    />
  </div>
</template>
<script>
import {
  apiCommercialVoucherRecordList,
  apiDoIssuingInvoices
} from "@/api/invoice.js";

export default {
  props: {},
  data() {
    const _this = this;
    return {
      queryParams: {},
      pageNo: 1,
      limit: 10,
      exportLoading: false,
      queryPageApi: apiCommercialVoucherRecordList,
      selectionRows: [],
      tableOption: [
        {
          label: "订单号",
          prop: "orderId",
          width: 120
        },

        {
          label: "服务项目",
          prop: "serviceName",
          width: 150
        },
        {
          label: "实付金额",
          prop: "realityMoney",
          width: 120,
          formatter({ realityMoney }) {
            return this.$filters.filterPriceFormat(realityMoney || 0);
          }
        },
        {
          label: "售后退款金额",
          prop: "afterSaleMoney",
          width: 120,
          formatter({ afterSaleMoney }) {
            return this.$filters.filterPriceFormat(afterSaleMoney || 0);
          }
        },

        {
          label: "可开票金额",
          width: 120,
          prop: "canInvoiceMoney",
          formatter({ canInvoiceMoney }) {
            return this.$filters.filterPriceFormat(canInvoiceMoney || 0);
          }
        },

        {
          label: "订单完成时间",
          width: 150,
          prop: "orderFinishedTime",
          render(createElement, { row }) {
            try {
              const strArr = row.orderFinishedTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },
        {
          label: "售后期结束时间",
          width: 150,
          prop: "afterSaleFinishedTime",
          render(createElement, { row }) {
            try {
              const strArr = row.afterSaleFinishedTime.split(" ");
              const dom = (
                <div>
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        }
      ]
    };
  },
  mounted() {
    this.queryParams = {
      commercialVoucherId: this.$route.query.commercialVoucherId,
      invoiceState: this.$route.query.invoiceState
    };
  },
  methods: {
    renderFunc(res) {
      return res;
    },
    onSubmit({ values }) {
      console.log(values);
      if (values.hasOwnProperty("time")) {
        values = {
          ...values,
          startTime: values.time ? values.time[0] : "",
          endTime: values.time ? values.time[1] : ""
        };
        delete values.time;
      }
      this.queryParams = values;
    },
    onClear() {
      this.queryParams = {};
    }
  }
};
</script>
